<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="/static/img/favicon.ico" rel="shortcut icon" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Register</title>
    <style>
      body,
      html {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        height: 100%;
      }

      #particles-js {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
      }

      .container {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 300px;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .container h2 {
        text-align: center;
        margin-bottom: 20px;
      }

      .form-group {
        margin-bottom: 20px;
      }

      .form-group label {
        display: block;
        margin-bottom: 5px;
      }

      .form-group input {
        width: calc(100% - 22px);
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .form-group input:focus {
        outline: none;
        border-color: #007bff;
      }

      .btn {
        background-color: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
      }

      .btn:hover {
        background-color: #0056b3;
      }
    </style>
  </head>

  <body>
    <div id="particles-js"></div>
    <div class="container">
      <h2>Register</h2>
      <form action="#">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" required />
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required />
        </div>
        <div class="form-group">
          <label for="confirm_password">Confirm Password</label>
          <input
            type="password"
            id="confirm_password"
            name="confirm_password"
            required
          />
        </div>
        <div class="btn" onclick="onSignup(event)">Register</div>
      </form>
    </div>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script lang="javascript">
      function onSignup(event) {
        event.preventDefault();
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        $.ajax({
          url: "/user/signup",
          type: "POST",
          data: {
            "username": username.value,
            "password": password.value
          },
          error: function (jqXHR, textStatus, errorThrown) {
            if (textStatus == "error") {
              alert(textStatus + " : " + errorThrown);
            } else {
              alert(textStatus);
            }
          },
          success: function (response) {
            if (response == "SUCCESS") {
              setTimeout(() => {
                window.location.href = '/static/view/signin.html';
              }, 1000);
            } else {
              alert('signup fail!');
            }
          }
        });
      }

      particlesJS('particles-js', {
        particles: {
          number: { value: 50 },
          color: { value: '#000' },
          shape: {
            type: 'circle',
            stroke: { width: 0, color: '#000' },
            polygon: { nb_sides: 5 },
            image: { src: 'img/github.svg', width: 100, height: 100 }
          },
          opacity: {
            value: 0.5,
            random: true,
            anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
          },
          size: {
            value: 3,
            random: true,
            anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
          },
          line_linked: {
            enable: true,
            distance: 150,
            color: '#000',
            opacity: 0.4,
            width: 1
          },
          move: {
            enable: true,
            speed: 6,
            direction: 'none',
            random: false,
            straight: false,
            out_mode: 'out',
            bounce: false,
            attract: { enable: true, rotateX: 300, rotateY: 300 } // 修改
          }
        },
        interactivity: {
          detect_on: 'window',
          events: {
            onhover: { enable: true, mode: 'repulse' },
            onclick: { enable: true, mode: 'push' },
            resize: true
          },
          modes: {
            grab: { distance: 400, line_linked: { opacity: 1 } },
            bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
            repulse: { distance: 200, duration: 0.4 },
            push: { particles_nb: 4 },
            remove: { particles_nb: 2 }
          }
        },
        retina_detect: true
      });
    </script>
  </body>
</html>
